<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form size="mini">
          <el-row :gutter="4">
            <el-col :span="3">
              <el-form-item>
                <el-input v-model="searchQuery.settlementName" placeholder="结算人" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button size="mini" type="primary" plain @click="orderGetInitList()">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <ad-table ref="order"
              :data="orderList" :show-summary="orderSummary" v-loading="orderInitLoading" border u-table :data-changes-scroll-top="orderIsScrollTop"
              @row-click="orderSelectRow" @selection-change="orderSelectRows"
              :searchQuery="orderSearchQuery" @search="orderGetInitList"
              @sort-change="orderSortInitList" @filter-change="orderFilterInitList"
              @table-body-scroll="orderGetMoreList" :height="tableHeight">
      <ad-table-column label="序号" type="index" ctype="index" fixed/>
      <ad-table-column label="结算人" prop="settlementUser" w="4c1f"/>
      <ad-table-column label="结算金额" prop="totalCheck" w="4c"/>
      <ad-table-column label="结算时间" prop="createTime" ctype="datetime"/>
      <ad-table-column label="实际收付款时间" prop="realCollectionTime" ctype="datetime"/>
      <ad-table-column label="备注" prop="orderRemark" ctype="remark"/>
      <ad-table-column width="auto"/>
      <ad-table-column label="操作" width="70">
        <template v-slot="{row}">
          <div class="op">
            <el-button type="text" class="op-btn" @click="openSettlementDetail(row)">查看</el-button>
          </div>
        </template>
      </ad-table-column>
    </ad-table>

    <el-dialog title="对账单详情" :visible.sync="settlementDetail.visible"custom-class="ad-dialog" width="1000px">
      <settlement-detail :visible.sync="settlementDetail.visible" :data="settlementDetail.data"   @refresh="orderGetInitList"/>
    </el-dialog>
  </div>
</template>

<script>
import AdDatetimeRange from '@/components/AdDateTimeRange'
import AdTable from '@/components/AdTable'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import adTable from '@/mixins/adTable/index'
import {getList as orderApiGetList} from '@/api/finance/check/finish'
import settlementDetail from './dialog/settlementDetail'

export default {
  name: 'finance-finish',
  components: { AdDatetimeRange, AdTable, AdTableColumn, settlementDetail },
  mixins: [adTable([{name: 'order'}])],
  data() {
    return {
      searchQuery: {},
      tableHeight: document.documentElement.clientHeight - 136,
      settlementDetail: {
        visible: false,
        data: {}
      }
    }
  },
  created() {
    this.orderGetInitList()
  },
  methods: { orderApiGetList,
    openSettlementDetail(row) {
      this.settlementDetail.data = row
      this.settlementDetail.visible = true
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-tag__close.el-icon-close { top: 1px; }
.page-filter { align-items: flex-end; }
.search-wrapper {
  .title { display: flex; margin-bottom: 30px; justify-content: center; align-items: center; font-size: 18px; color: #141414; font-weight: bold; }
  .condition { display: flex; margin-bottom: 10px;
    .tabs { display: flex; font-size: 12px;
      .tab { margin-right: 14px; padding: 8px 4px 0; border-bottom: 2px solid transparent; cursor: pointer; }
      .tab.on { border-bottom: 2px solid #1F89EB; }}
    .time { margin-left: 10px;
      ::v-deep .el-date-editor { width: 154px;
        .el-input__inner { height: 34px; padding-left: 20px; padding-right: 0; border: none; }
        .el-input__prefix { left: 0; .el-icon-time { display: flex; align-items: center; }}
        .el-input__suffix .el-input__icon { display: flex; width: 16px; align-items: center; }}}}
  .search { display: flex; width: 620px;
    .input { flex: 1;
      ::v-deep .el-input__inner { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }}
    .btn {
      ::v-deep { border-top-left-radius: 0; border-bottom-left-radius: 0; }}}}
</style>